<template>
    <h2 style="text-align: center;">用户登录</h2>
    <div class="main">
        <el-card style="width: 480px ;height: auto;">
            <el-form
                ref="ruleFormRef"
                style="max-width: 600px"
                :model="Info"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
                >
                <el-form-item label="用户名称" prop="U_LoginName">
                    <el-input v-model="Info.U_LoginName" />
                </el-form-item>

                <el-form-item label="用户密码" prop="U_LoginPassword">
                    <el-input v-model="Info.U_LoginPassword" type="password" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'
    import { useRouter } from 'vue-router'
    import { useCounterStore } from '@/stores/counter'

    //创建仓库实例
    const store=useCounterStore();
    const router=useRouter();
    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //登录响应式数据
    const Info = ref({
       U_Id: "",
       U_LoginName: "",
       U_LoginPassword: "",
    })
    
    const locationOptions = ['Home', 'Company', 'School']
    //验证
    const rules = reactive<FormRules>({
        U_LoginName: [
            { required: true, message: '用户名称不能为空！', trigger: 'blur' },
        ],
        U_LoginPassword: [
            { required: true, message: '用户密码不能为空！', trigger: 'blur' },
        ],
    })
    //按钮
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('数据效验成功，请执行登录操作!')
            axios.get("https://localhost:44377/api/User/Login",
                {
                    params:{
                        name:Info.value.U_LoginName,
                        password:Info.value.U_LoginPassword,
                    }
                }
            )
            .then(res=>{
                console.log(res.data.Data.Comm_JWT)
                if(res.data.Data.Comm_Code==1)
                {
                    ElMessage.success(res.data.Data.Comm_Msg);
                    //本地保存
                    window.localStorage.setItem("token",res.data.Data.Comm_JWT);
                     //后续数据提交时需加入JWT Token令牌
                 axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.Data.Comm_JWT;
                    // //保存用户信息
                    store.uName=res.data.Data.Comm_Name;
                    store.isLogin=true; //这句
                    //跳转到主页面
                    router.push("/Home");
                }
                else
                {
                    ElMessage.error(res.data.Data.Comm_Msg);
                }
            })
        } else {
            console.log('数据参数有问题，请检查!', fields)
        }
        })
    }
    //重置
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
    
    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))
</script>


<style>
    .main {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
  